<template>
  <div class="alNavBar">
    <van-nav-bar
        :title="title"
        :left-text="leftText"
        :right-text="rightText"
        @click-left="onClickLeft"
        @click-right="onClickRight"
        :settingRight="settingRight"
    >
      <template #left v-if="showBack">
        <i class="iconfont icon-left"></i>
      </template>
      <template #title>
        <slot name="title"></slot>
      </template>
      <template #right v-if="showGoHome">
        <i class="iconfont" :class="icon"></i>
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
export default {
  name: 'AlNavBar',
  props: {
    title: {
      type: String
    },
    leftText: {
      type: String
    },
    rightText: {
      type: String
    },
    showBack: {
      type: Boolean,
      default: true
    },
    showGoHome: {
      type: Boolean,
      default: true
    },
    settingRight: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: "icon-jia"
    }
  },
  methods: {
    onClickLeft() {
      // this.$router.go(-1)
      this.$emit('onClickLeft')
    },
    onClickRight() {
      if (!this.settingRight) {
        this.$router.push("/home")
      }
      this.$emit('onClickRight')
    }
  }
}
</script>

<style lang="less">
.alNavBar {
  .icon-back {
    font-size: 44px;
  }
}
</style>
